<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>珠峰架构师成长计划</title>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="nav">
    <div class="logo">
        
            珠峰架构师成长计划
        
    </div>
<ul><li><a href="../index.html">0.Async</a></li><li><a href="../html/0.editor.html">0.editor</a></li><li><a href="../html/0.module.html">0.module</a></li><li><a href="../html/1.ES2015.html">1.ES2015</a></li><li><a href="../html/2.Promise.html">2.Promise</a></li><li><a href="../html/3.Node.html">3.Node</a></li><li><a href="../html/4.NodeInstall.html">4.NodeInstall</a></li><li><a href="../html/5.REPL.html">5.REPL</a></li><li><a href="../html/6.NodeCore.html">6.NodeCore</a></li><li><a href="../html/7.module&NPM.html">7.module&NPM</a></li><li><a href="../html/8.Encoding.html">8.Encoding</a></li><li><a href="../html/9.Buffer.html">9.Buffer</a></li><li><a href="../html/10.fs.html">10.fs</a></li><li><a href="../html/11.Stream-1.html">11.Stream-1</a></li><li><a href="../html/11.Stream-2.html">11.Stream-2</a></li><li><a href="../html/11.Stream-3.html">11.Stream-3</a></li><li><a href="../html/11.Stream-4.html">11.Stream-4</a></li><li><a href="../html/12-Network-2.html">12-Network-2</a></li><li><a href="../html/12.NetWork-3.html">12.NetWork-3</a></li><li><a href="../html/12.Network-1.html">12.Network-1</a></li><li><a href="../html/13.tcp.html">13.tcp</a></li><li><a href="../html/14.http-1.html">14.http-1</a></li><li><a href="../html/14.http-2.html">14.http-2</a></li><li><a href="../html/15.compress.html">15.compress</a></li><li><a href="../html/16.crypto.html">16.crypto</a></li><li><a href="../html/17.process.html">17.process</a></li><li><a href="../html/18.yargs.html">18.yargs</a></li><li><a href="../html/19.cache.html">19.cache</a></li><li><a href="../html/20.action.html">20.action</a></li><li><a href="../html/21.https.html">21.https</a></li><li><a href="../html/22.cookie.html">22.cookie</a></li><li><a href="../html/23.session.html">23.session</a></li><li><a href="../html/24.express-1.html">24.express-1</a></li><li><a href="../html/24.express-2.html">24.express-2</a></li><li><a href="../html/24.express-3.html">24.express-3</a></li><li><a href="../html/24.express-4.html">24.express-4</a></li><li><a href="../html/25.koa-1.html">25.koa-1</a></li><li><a href="../html/26.webpack-1-basic.html">26.webpack-1-basic</a></li><li><a href="../html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li><li><a href="../html/26.webpack-3.tapable.html">26.webpack-3.tapable</a></li><li><a href="../html/26.webpack-4-AST.html">26.webpack-4-AST</a></li><li><a href="../html/26.webpack-5-source.html">26.webpack-5-source</a></li><li><a href="../html/26.webpack-6-loader.html">26.webpack-6-loader</a></li><li><a href="../html/26.webpack-7-plugin.html">26.webpack-7-plugin</a></li><li><a href="../html/26.webpack-8-hand.html">26.webpack-8-hand</a></li><li><a href="../html/27.react-1.html">27.react-1</a></li><li class="active"><a href="../html/27.react-2.html">27.react-2</a></li><li><a href="../html/27.react-3.html">27.react-3</a></li><li><a href="../html/27.react-4-immutable.html">27.react-4-immutable</a></li><li><a href="../html/27.react-5-react-dom-diff.html">27.react-5-react-dom-diff</a></li><li><a href="../html/27.react-6.html">27.react-6</a></li><li><a href="../html/28.react-mobx.html">28.react-mobx</a></li><li><a href="../html/28.redux-0.html">28.redux-0</a></li><li><a href="../html/28.redux-1.html">28.redux-1</a></li><li><a href="../html/28.redux-2-中间件.html">28.redux-2-中间件</a></li><li><a href="../html/28.redux-3-saga.html">28.redux-3-saga</a></li><li><a href="../html/28.redux-jwt-back.html">28.redux-jwt-back</a></li><li><a href="../html/28.redux-jwt-front.html">28.redux-jwt-front</a></li><li><a href="../html/29.mongodb-1.html">29.mongodb-1</a></li><li><a href="../html/29.mongodb-2.html">29.mongodb-2</a></li><li><a href="../html/29.mongodb-3.html">29.mongodb-3</a></li><li><a href="../html/29.mongodb-4.html">29.mongodb-4</a></li><li><a href="../html/29.mongodb-5.html">29.mongodb-5</a></li><li><a href="../html/29.mongodb-6.html">29.mongodb-6</a></li><li><a href="../html/30.cms-1-mysql.html">30.cms-1-mysql</a></li><li><a href="../html/30.cms-2-mysql.html">30.cms-2-mysql</a></li><li><a href="../html/30.cms-3-mysql.html">30.cms-3-mysql</a></li><li><a href="../html/30.cms-4-egg.html">30.cms-4-egg</a></li><li><a href="../html/30.cms-5-api.html">30.cms-5-api</a></li><li><a href="../html/30.cms-6-roadhog.html">30.cms-6-roadhog</a></li><li><a href="../html/30.cms-7-umi.html">30.cms-7-umi</a></li><li><a href="../html/30.cms-8-dva.html">30.cms-8-dva</a></li><li><a href="../html/30.cms-9-dva.html">30.cms-9-dva</a></li><li><a href="../html/30.cms-10-front.html">30.cms-10-front</a></li><li><a href="../html/30.cms-11-deploy.html">30.cms-11-deploy</a></li><li><a href="../html/33.redis.html">33.redis</a></li><li><a href="../html/34.unittest.html">34.unittest</a></li><li><a href="../html/35.jwt.html">35.jwt</a></li><li><a href="../html/36.websocket-1.html">36.websocket-1</a></li><li><a href="../html/36.websocket-2.html">36.websocket-2</a></li><li><a href="../html/38.chat-api-1.html">38.chat-api-1</a></li><li><a href="../html/38.chat-api-2.html">38.chat-api-2</a></li><li><a href="../html/38.chat-3.html">38.chat-3</a></li><li><a href="../html/38.chat-api-3.html">38.chat-api-3</a></li><li><a href="../html/38.chat.html">38.chat</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/39.crawl-0.html">39.crawl-0</a></li><li><a href="../html/39.crawl-1.html">39.crawl-1</a></li><li><a href="../html/39.crawl-2.html">39.crawl-2</a></li><li><a href="../html/40.deploy.html">40.deploy</a></li><li><a href="../html/41.safe.html">41.safe</a></li><li><a href="../html/42.test.html">42.test</a></li><li><a href="../html/43.nginx.html">43.nginx</a></li><li><a href="../html/44.enzyme.html">44.enzyme</a></li><li><a href="../html/45.docker.html">45.docker</a></li><li><a href="../html/46.elastic.html">46.elastic</a></li><li><a href="../html/47.oauth.html">47.oauth</a></li><li><a href="../html/48.wxpay.html">48.wxpay</a></li><li><a href="../html/49.nunjucks.html">49.nunjucks</a></li><li><a href="../html/50.ketang.html">50.ketang</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/51.typescript.html">51.typescript</a></li><li><a href="../html/52.UML.html">52.UML</a></li><li><a href="../html/53.design.html">53.design</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/54.linux.html">54.linux</a></li><li><a href="../html/55.yaml.html">55.yaml</a></li><li><a href="../html/50.ketang2.html">50.ketang2</a></li><li><a href="../html/56.ts.html">56.ts</a></li><li><a href="../html/57.ts_react.html">57.ts_react</a></li><li><a href="../html/58.react-ssr.html">58.react-ssr</a></li><li><a href="../html/59.react-ssr.html">59.react-ssr</a></li></ul></div>


<div class="warpper">

    <div class="page-toc">
        <ul><li><a href="#t01. React生命周期">1. React生命周期</a></li><li><a href="#t12. 使用 PropTypes 进行类型检查">2. 使用 PropTypes 进行类型检查</a></li><li><a href="#t23. 优化性能">3. 优化性能</a><ul><li><a href="#t33.1 使用生产版本">3.1 使用生产版本</a></li><li><a href="#t44. 使用 Chrome 性能分析工具 分析组件性能">4. 使用 Chrome 性能分析工具 分析组件性能</a></li><li><a href="#t55. 避免重新渲染">5. 避免重新渲染</a></li><li><a href="#t65.1 shouldComponentUpdate">5.1 shouldComponentUpdate</a></li><li><a href="#t75.2 React.PureComponent 与 React.Component 完全相同，但是在shouldComponentUpdate()中实现时，使用了 props 和 state 的浅比较">5.2 React.PureComponent 与 React.Component 完全相同，但是在shouldComponentUpdate()中实现时，使用了 props 和 state 的浅比较</a></li><li><a href="#t85.3 使用 Immutable 数据结构">5.3 使用 Immutable 数据结构</a></li></ul></li><li><a href="#t96. Reconciliation">6. Reconciliation</a></li><li><a href="#t107. 上下文(Context)">7. 上下文(Context)</a></li><li><a href="#t118. 片段(fragments)">8. 片段(fragments)</a></li><li><a href="#t129. 插槽(Portals)">9. 插槽(Portals)</a></li><li><a href="#t1310. 错误边界(Error Boundaries)">10. 错误边界(Error Boundaries)</a></li><li><a href="#t1411. 高阶组件(Higher-Order Components)">11. 高阶组件(Higher-Order Components)</a></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h2 id="t01. React&#x751F;&#x547D;&#x5468;&#x671F;">1. React&#x751F;&#x547D;&#x5468;&#x671F; <a href="#t01. React&#x751F;&#x547D;&#x5468;&#x671F;"> # </a></h2>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Counter</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ <span class="hljs-comment">// &#x4ED6;&#x4F1A;&#x6BD4;&#x8F83;&#x4E24;&#x4E2A;&#x72B6;&#x6001;&#x76F8;&#x7B49;&#x5C31;&#x4E0D;&#x4F1A;&#x5237;&#x65B0;&#x89C6;&#x56FE; PureComponent&#x662F;&#x6D45;&#x6BD4;&#x8F83;</span>
  <span class="hljs-keyword">static</span> defaultProps = {
    <span class="hljs-attr">name</span>:<span class="hljs-string">&apos;&#x73E0;&#x5CF0;&#x57F9;&#x8BAD;&apos;</span>
  };
  <span class="hljs-keyword">constructor</span>(props){
    <span class="hljs-keyword">super</span>();
    <span class="hljs-keyword">this</span>.state = {<span class="hljs-attr">number</span>:<span class="hljs-number">0</span>}
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;1.constructor&#x6784;&#x9020;&#x51FD;&#x6570;&apos;</span>)
  }
  componentWillMount(){ <span class="hljs-comment">// &#x53D6;&#x672C;&#x5730;&#x7684;&#x6570;&#x636E; &#x540C;&#x6B65;&#x7684;&#x65B9;&#x5F0F;&#xFF1A;&#x91C7;&#x7528;&#x6E32;&#x67D3;&#x4E4B;&#x524D;&#x83B7;&#x53D6;&#x6570;&#x636E;&#xFF0C;&#x53EA;&#x6E32;&#x67D3;&#x4E00;&#x6B21;</span>
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;2.&#x7EC4;&#x4EF6;&#x5C06;&#x8981;&#x52A0;&#x8F7D; componentWillMount&apos;</span>);
  }
  componentDidMount(){
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;4.&#x7EC4;&#x4EF6;&#x6302;&#x8F7D;&#x5B8C;&#x6210; componentDidMount&apos;</span>);
  }
  handleClick=<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>{
    <span class="hljs-keyword">this</span>.setState({<span class="hljs-attr">number</span>:<span class="hljs-keyword">this</span>.state.number+<span class="hljs-number">1</span>});
  };
  <span class="hljs-comment">// react&#x53EF;&#x4EE5;shouldComponentUpdate&#x65B9;&#x6CD5;&#x4E2D;&#x4F18;&#x5316; PureComponent &#x53EF;&#x4EE5;&#x5E2E;&#x6211;&#x4EEC;&#x505A;&#x8FD9;&#x4EF6;&#x4E8B;</span>
  shouldComponentUpdate(nextProps,nextState){ <span class="hljs-comment">// &#x4EE3;&#x8868;&#x7684;&#x662F;&#x4E0B;&#x4E00;&#x6B21;&#x7684;&#x5C5E;&#x6027; &#x548C; &#x4E0B;&#x4E00;&#x6B21;&#x7684;&#x72B6;&#x6001;</span>
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;5.&#x7EC4;&#x4EF6;&#x662F;&#x5426;&#x66F4;&#x65B0; shouldComponentUpdate&apos;</span>);
    <span class="hljs-keyword">return</span> nextState.number%<span class="hljs-number">2</span>;
    <span class="hljs-comment">// return nextState.number!==this.state.number; //&#x5982;&#x679C;&#x6B64;&#x51FD;&#x6570;&#x79CD;&#x8FD4;&#x56DE;&#x4E86;false &#x5C31;&#x4E0D;&#x4F1A;&#x8C03;&#x7528;render&#x65B9;&#x6CD5;&#x4E86;</span>
  } <span class="hljs-comment">//&#x4E0D;&#x8981;&#x968F;&#x4FBF;&#x7528;setState &#x53EF;&#x80FD;&#x4F1A;&#x6B7B;&#x5FAA;&#x73AF;</span>
  componentWillUpdate(){
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;6.&#x7EC4;&#x4EF6;&#x5C06;&#x8981;&#x66F4;&#x65B0; componentWillUpdate&apos;</span>);
  }
  componentDidUpdate(){
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;7.&#x7EC4;&#x4EF6;&#x5B8C;&#x6210;&#x66F4;&#x65B0; componentDidUpdate&apos;</span>);
  }
  render(){
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;3.render&apos;</span>);
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{this.state.number}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        {this.state.number&gt;3?null:<span class="hljs-tag">&lt;<span class="hljs-name">ChildCounter</span> <span class="hljs-attr">n</span>=<span class="hljs-string">{this.state.number}/</span>&gt;</span>}
        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.handleClick}</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    )
  }
}
class ChildCounter extends Component{
  componentWillUnmount(){
    console.log(&apos;&#x7EC4;&#x4EF6;&#x5C06;&#x8981;&#x5378;&#x8F7D;componentWillUnmount&apos;)
  }
  componentWillMount(){
    console.log(&apos;child componentWillMount&apos;)
  }
  render(){
    console.log(&apos;child-render&apos;)
    return (<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      {this.props.n}
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>)
  }
  componentDidMount(){
    console.log(&apos;child componentDidMount&apos;)
  }
  componentWillReceiveProps(newProps){ // &#x7B2C;&#x4E00;&#x6B21;&#x4E0D;&#x4F1A;&#x6267;&#x884C;&#xFF0C;&#x4E4B;&#x540E;&#x5C5E;&#x6027;&#x66F4;&#x65B0;&#x65F6;&#x624D;&#x4F1A;&#x6267;&#x884C;
    console.log(&apos;child componentWillReceiveProps&apos;)
  }
  shouldComponentUpdate(nextProps,nextState){
    return nextProps.n%3; //&#x5B50;&#x7EC4;&#x4EF6;&#x5224;&#x65AD;&#x63A5;&#x6536;&#x7684;&#x5C5E;&#x6027; &#x662F;&#x5426;&#x6EE1;&#x8DB3;&#x66F4;&#x65B0;&#x6761;&#x4EF6; &#x4E3A;true&#x5219;&#x66F4;&#x65B0;
  }
}
// defaultProps
// constructor
// componentWillMount
// render
// componentDidMount
// &#x72B6;&#x6001;&#x66F4;&#x65B0;&#x4F1A;&#x89E6;&#x53D1;&#x7684;
// shouldComponentUpdate nextProps,nextState=&gt;boolean
// componentWillUpdate
// componentDidUpdate
// &#x5C5E;&#x6027;&#x66F4;&#x65B0;
// componentWillReceiveProps newProps
// &#x5378;&#x8F7D;
// componentWillUnmount
</span></code></pre>
<p><img src="http://son.fullstackjavascript.cn/lifeCycle.png" alt="lifeCycle"></p>
<h2 id="t12. &#x4F7F;&#x7528; PropTypes &#x8FDB;&#x884C;&#x7C7B;&#x578B;&#x68C0;&#x67E5;">2. &#x4F7F;&#x7528; PropTypes &#x8FDB;&#x884C;&#x7C7B;&#x578B;&#x68C0;&#x67E5; <a href="#t12. &#x4F7F;&#x7528; PropTypes &#x8FDB;&#x884C;&#x7C7B;&#x578B;&#x68C0;&#x67E5;"> # </a></h2>
<p>React &#x5185;&#x7F6E;&#x4E86;&#x7C7B;&#x578B;&#x68C0;&#x6D4B;&#x7684;&#x529F;&#x80FD;&#x3002;&#x8981;&#x5728;&#x7EC4;&#x4EF6;&#x4E2D;&#x8FDB;&#x884C;&#x7C7B;&#x578B;&#x68C0;&#x6D4B;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x8D4B;&#x503C; propTypes &#x5C5E;&#x6027;</p>
<ul>
<li>.array &#x6570;&#x7EC4;</li>
<li>.bool &#x5E03;&#x5C14;&#x503C;</li>
<li>.func &#x51FD;&#x6570;</li>
<li>.number &#x6570;&#x5B57;</li>
<li>.object &#x5BF9;&#x8C61;</li>
<li>.string &#x5B57;&#x7B26;&#x4E32;</li>
<li>.symbol &#x7B26;&#x53F7;</li>
<li>.node &#x4EFB;&#x4F55;&#x4E1C;&#x897F;&#x90FD;&#x53EF;&#x4EE5;&#x88AB;&#x6E32;&#x67D3;:numbers, strings, elements,&#x6216;&#x8005;&#x662F;&#x5305;&#x542B;&#x8FD9;&#x4E9B;&#x7C7B;&#x578B;&#x7684;&#x6570;&#x7EC4;(&#x6216;&#x8005;&#x662F;&#x7247;&#x6BB5;)&#x3002;</li>
<li>.element React&#x5143;&#x7D20;</li>
<li>.instanceOf(Message) &#x7C7B;&#x7684;&#x4E00;&#x4E2A;&#x5B9E;&#x4F8B;</li>
<li>.oneOf([&apos;News&apos;, &apos;Photos&apos;]) &#x679A;&#x4E3E;&#x503C;</li>
<li>.oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)]) &#x591A;&#x79CD;&#x7C7B;&#x578B;&#x5176;&#x4E2D;&#x4E4B;&#x4E00;</li>
<li>.arrayOf(PropTypes.number) &#x67D0;&#x79CD;&#x7C7B;&#x578B;&#x7684;&#x6570;&#x7EC4;</li>
<li>.objectOf(PropTypes.number)  &#x67D0;&#x79CD;&#x7C7B;&#x578B;&#x7684;&#x5BF9;&#x8C61;</li>
<li>.shape({color: PropTypes.string,fontSize: PropTypes.number}) &#x7279;&#x5B9A;&#x5F62;&#x5F0F;&#x7684;&#x5BF9;&#x8C61;</li>
<li>.func.isRequired &#x53EF;&#x4EE5;&#x4F7F;&#x7528; `isRequired&apos; &#x94FE;&#x63A5;&#x4E0A;&#x8FF0;&#x4EFB;&#x4F55;&#x4E00;&#x4E2A;&#xFF0C;&#x4EE5;&#x786E;&#x4FDD;&#x5728;&#x6CA1;&#x6709;&#x63D0;&#x4F9B; prop &#x7684;&#x60C5;&#x51B5;&#x4E0B;&#x663E;&#x793A;&#x8B66;&#x544A;</li>
<li>.any.isRequired &#x4EFB;&#x4F55;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x7684;&#x503C;</li>
<li>function(props, propName, componentName) { return new Error()} &#x81EA;&#x5B9A;&#x4E49;&#x7684;&#x9A8C;&#x8BC1;&#x5668;</li>
<li>.arrayOf(function(propValue, key, componentName, location, propFullName) {}</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;
<span class="hljs-keyword">import</span> PropTypes <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;prop-types&apos;</span>;
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{
  <span class="hljs-keyword">static</span> defaultProps = {
    <span class="hljs-attr">name</span>:<span class="hljs-string">&apos;Stranger&apos;</span>
  }
    <span class="hljs-keyword">static</span> propTypes={
        <span class="hljs-attr">name</span>: PropTypes.string.isRequired,
        <span class="hljs-attr">age</span>: PropTypes.number.isRequired,
        <span class="hljs-attr">gender</span>: PropTypes.oneOf([<span class="hljs-string">&apos;male&apos;</span>,<span class="hljs-string">&apos;famale&apos;</span>]),
        <span class="hljs-attr">hobby</span>: PropTypes.array,
        <span class="hljs-attr">postion</span>: PropTypes.shape({
            <span class="hljs-attr">x</span>: PropTypes.number,
            <span class="hljs-attr">y</span>:PropTypes.number
        }),
        age(props,propName,componentName) {
            <span class="hljs-keyword">let</span> age=props[propName];
            <span class="hljs-keyword">if</span> (age &lt;<span class="hljs-number">0</span> || age&gt;<span class="hljs-number">120</span>) {
                <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">`Invalid Prop <span class="hljs-subst">${propName}</span> supplied to <span class="hljs-subst">${componentName}</span>`</span>)
            }
        }
    }
    render() {
        <span class="hljs-keyword">let</span> {name,age,gender,hobby,position}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">thead</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#x59D3;&#x540D;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#x5E74;&#x9F84;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#x6027;&#x522B;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#x7231;&#x597D;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>&#x4F4D;&#x7F6E;<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">thead</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>{name}<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>{age}<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>{gender}<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>{hobby.join(&apos;,&apos;)}<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>{position.x+&apos; &apos;+position.y}<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span></span>
        )
    }
}
<span class="hljs-keyword">let</span> person={
    <span class="hljs-attr">age</span>: <span class="hljs-number">100</span>,
    <span class="hljs-attr">gender</span>:<span class="hljs-string">&apos;male&apos;</span>,
    <span class="hljs-attr">hobby</span>: [<span class="hljs-string">&apos;basketball&apos;</span>,<span class="hljs-string">&apos;football&apos;</span>],
    <span class="hljs-attr">position</span>: {<span class="hljs-attr">x</span>: <span class="hljs-number">10</span>,<span class="hljs-attr">y</span>: <span class="hljs-number">10</span>},
}
ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Person</span> {<span class="hljs-attr">...person</span>}/&gt;</span>, document.getElementById(&apos;root&apos;));

</span></code></pre>
<h2 id="t23. &#x4F18;&#x5316;&#x6027;&#x80FD;">3. &#x4F18;&#x5316;&#x6027;&#x80FD; <a href="#t23. &#x4F18;&#x5316;&#x6027;&#x80FD;"> # </a></h2>
<p>&#x5728;&#x5185;&#x90E8;&#xFF0C;React&#x4F7F;&#x7528;&#x51E0;&#x79CD;&#x5DE7;&#x5999;&#x7684;&#x6280;&#x672F;&#x6765;&#x6700;&#x5927;&#x9650;&#x5EA6;&#x5730;&#x51CF;&#x5C11;&#x66F4;&#x65B0;UI&#x6240;&#x9700;&#x7684;&#x6602;&#x8D35;&#x7684; DOM &#x64CD;&#x4F5C;&#x7684;&#x6570;&#x91CF;</p>
<h3 id="t33.1 &#x4F7F;&#x7528;&#x751F;&#x4EA7;&#x7248;&#x672C;">3.1 &#x4F7F;&#x7528;&#x751F;&#x4EA7;&#x7248;&#x672C; <a href="#t33.1 &#x4F7F;&#x7528;&#x751F;&#x4EA7;&#x7248;&#x672C;"> # </a></h3>
<ul>
<li>&#x6700;&#x597D;&#x5728;&#x5F00;&#x53D1;&#x5E94;&#x7528;&#x65F6;&#x4F7F;&#x7528;&#x5F00;&#x53D1;&#x6A21;&#x5F0F;&#xFF0C;&#x90E8;&#x7F72;&#x5E94;&#x7528;&#x65F6;&#x6362;&#x4E3A;&#x751F;&#x4EA7;&#x6A21;&#x5F0F;</li>
</ul>
<p><strong>Create React App</strong></p>
<pre><code class="lang-js">npm run build
</code></pre>
<p><strong>&#x5355;&#x6587;&#x4EF6;&#x6784;&#x5EFA;</strong></p>
<pre><code class="lang-js">&lt;script src=<span class="hljs-string">&quot;https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b293e3a382f1b6a6e">[email&#160;protected]</a>/dist/react.min.js&quot;</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>
&lt;script src=<span class="hljs-string">&quot;https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5123343032257c353e3c116064">[email&#160;protected]</a>/dist/react-dom.min.js&quot;</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>
</code></pre>
<p><strong>webpack</strong></p>
<pre><code class="lang-js"><span class="hljs-keyword">new</span> webpack.DefinePlugin({
  <span class="hljs-string">&apos;process.env&apos;</span>: {
    <span class="hljs-attr">NODE_ENV</span>: <span class="hljs-built_in">JSON</span>.stringify(<span class="hljs-string">&apos;production&apos;</span>)
  }
}),
<span class="hljs-keyword">new</span> webpack.optimize.UglifyJsPlugin()
</code></pre>
<h3 id="t44. &#x4F7F;&#x7528; Chrome &#x6027;&#x80FD;&#x5206;&#x6790;&#x5DE5;&#x5177; &#x5206;&#x6790;&#x7EC4;&#x4EF6;&#x6027;&#x80FD;">4. &#x4F7F;&#x7528; Chrome &#x6027;&#x80FD;&#x5206;&#x6790;&#x5DE5;&#x5177; &#x5206;&#x6790;&#x7EC4;&#x4EF6;&#x6027;&#x80FD; <a href="#t44. &#x4F7F;&#x7528; Chrome &#x6027;&#x80FD;&#x5206;&#x6790;&#x5DE5;&#x5177; &#x5206;&#x6790;&#x7EC4;&#x4EF6;&#x6027;&#x80FD;"> # </a></h3>
<ol>
<li>&#x901A;&#x8FC7;&#x6DFB;&#x52A0; ?react_perf &#x67E5;&#x8BE2;&#x5B57;&#x6BB5;&#x52A0;&#x8F7D;&#x4F60;&#x7684;&#x5E94;&#x7528;(&#x4F8B;&#x5982;&#xFF1A;<a href="http://localhost:3000/?react_perf)&#x3002;">http://localhost:3000/?react_perf)&#x3002;</a></li>
<li>&#x6253;&#x5F00; Chrome DevTools Performance &#x5E76;&#x70B9;&#x51FB; Record &#x3002;<a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference">timeline-tool</a></li>
<li>&#x6267;&#x884C;&#x4F60;&#x60F3;&#x8981;&#x5206;&#x6790;&#x7684;&#x64CD;&#x4F5C;&#xFF0C;&#x4E0D;&#x8981;&#x8D85;&#x8FC7;20&#x79D2;&#xFF0C;&#x5426;&#x5219; Chrome &#x53EF;&#x80FD;&#x4F1A;&#x6302;&#x8D77;&#x3002;</li>
<li>&#x505C;&#x6B62;&#x8BB0;&#x5F55;&#x3002;</li>
<li>&#x5728; User Timing &#x6807;&#x7B7E;&#x4E0B;&#xFF0C;React&#x4E8B;&#x4EF6;&#x5C06;&#x4F1A;&#x5206;&#x7EC4;&#x5217;&#x51FA;&#x3002;<a href="https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad">react-16</a></li>
</ol>
<h3 id="t55. &#x907F;&#x514D;&#x91CD;&#x65B0;&#x6E32;&#x67D3;">5. &#x907F;&#x514D;&#x91CD;&#x65B0;&#x6E32;&#x67D3; <a href="#t55. &#x907F;&#x514D;&#x91CD;&#x65B0;&#x6E32;&#x67D3;"> # </a></h3>
<ul>
<li>React &#x6784;&#x5EFA;&#x5E76;&#x7EF4;&#x62A4;&#x6E32;&#x67D3; UI &#x7684;&#x5185;&#x90E8;&#x8868;&#x793A;</li>
<li>&#x5F53;&#x7EC4;&#x4EF6;&#x7684; props &#x548C; state &#x6539;&#x53D8;&#x65F6;&#xFF0C;React &#x901A;&#x8FC7;&#x6BD4;&#x8F83;&#x65B0;&#x8FD4;&#x56DE;&#x7684;&#x5143;&#x7D20; &#x548C; &#x4E4B;&#x524D;&#x6E32;&#x67D3;&#x7684;&#x5143;&#x7D20; &#x6765;&#x51B3;&#x5B9A;&#x662F;&#x5426;&#x6709;&#x5FC5;&#x8981;&#x66F4;&#x65B0;DOM&#x5143;&#x7D20;&#x3002;&#x5F53;&#x4E8C;&#x8005;&#x4E0D;&#x76F8;&#x7B49;&#x65F6;&#xFF0C;&#x5219;&#x66F4;&#x65B0; DOM &#x5143;&#x7D20;</li>
</ul>
<p><img src="http://img.zhufengpeixun.cn/should-component.png" alt="shouldComponentUpdate"></p>
<h3 id="t65.1 shouldComponentUpdate">5.1 shouldComponentUpdate <a href="#t65.1 shouldComponentUpdate"> # </a></h3>
<h3 id="t75.2 React.PureComponent &#x4E0E; React.Component &#x5B8C;&#x5168;&#x76F8;&#x540C;&#xFF0C;&#x4F46;&#x662F;&#x5728;shouldComponentUpdate()&#x4E2D;&#x5B9E;&#x73B0;&#x65F6;&#xFF0C;&#x4F7F;&#x7528;&#x4E86; props &#x548C; state &#x7684;&#x6D45;&#x6BD4;&#x8F83;">5.2 React.PureComponent &#x4E0E; React.Component &#x5B8C;&#x5168;&#x76F8;&#x540C;&#xFF0C;&#x4F46;&#x662F;&#x5728;shouldComponentUpdate()&#x4E2D;&#x5B9E;&#x73B0;&#x65F6;&#xFF0C;&#x4F7F;&#x7528;&#x4E86; props &#x548C; state &#x7684;&#x6D45;&#x6BD4;&#x8F83; <a href="#t75.2 React.PureComponent &#x4E0E; React.Component &#x5B8C;&#x5168;&#x76F8;&#x540C;&#xFF0C;&#x4F46;&#x662F;&#x5728;shouldComponentUpdate()&#x4E2D;&#x5B9E;&#x73B0;&#x65F6;&#xFF0C;&#x4F7F;&#x7528;&#x4E86; props &#x548C; state &#x7684;&#x6D45;&#x6BD4;&#x8F83;"> # </a></h3>
<h3 id="t85.3 &#x4F7F;&#x7528; Immutable &#x6570;&#x636E;&#x7ED3;&#x6784;">5.3 &#x4F7F;&#x7528; Immutable &#x6570;&#x636E;&#x7ED3;&#x6784; <a href="#t85.3 &#x4F7F;&#x7528; Immutable &#x6570;&#x636E;&#x7ED3;&#x6784;"> # </a></h3>
<ul>
<li>&#x4E0D;&#x53EF;&#x53D8;(Immutable): &#x4E00;&#x4E2A;&#x96C6;&#x5408;&#x4E00;&#x65E6;&#x521B;&#x5EFA;&#xFF0C;&#x5728;&#x5176;&#x4ED6;&#x65F6;&#x95F4;&#x662F;&#x4E0D;&#x53EF;&#x66F4;&#x6539;&#x7684;&#x3002;</li>
<li>&#x6301;&#x4E45;&#x7684;(Persistent): &#x65B0;&#x7684;&#x96C6;&#x5408;&#x53EF;&#x4EE5;&#x57FA;&#x4E8E;&#x4E4B;&#x524D;&#x7684;&#x7ED3;&#x5408;&#x521B;&#x5EFA;&#x5E76;&#x4EA7;&#x751F;&#x7A81;&#x53D8;&#xFF0C;&#x4F8B;&#x5982;&#xFF1A;set&#x3002;&#x539F;&#x6765;&#x7684;&#x96C6;&#x5408;&#x5728;&#x65B0;&#x96C6;&#x5408;&#x521B;&#x5EFA;&#x4E4B;&#x540E;&#x4ECD;&#x7136;&#x662F;&#x53EF;&#x7528;&#x7684;&#x3002;</li>
<li>&#x7ED3;&#x6784;&#x5171;&#x4EAB;(Structural Sharing): &#x65B0;&#x7684;&#x96C6;&#x5408;&#x5C3D;&#x53EF;&#x80FD;&#x901A;&#x8FC7;&#x4E4B;&#x524D;&#x96C6;&#x5408;&#x76F8;&#x540C;&#x7684;&#x7ED3;&#x6784;&#x521B;&#x5EFA;&#xFF0C;&#x6700;&#x5C0F;&#x7A0B;&#x5EA6;&#x5730;&#x51CF;&#x5C11;&#x590D;&#x5236;&#x64CD;&#x4F5C;&#x6765;&#x63D0;&#x9AD8;&#x6027;&#x80FD;&#x3002;<pre><code class="lang-js"><span class="hljs-keyword">import</span> { is } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;immutable&apos;</span>;
shouldComponentUpdate: <span class="hljs-function">(<span class="hljs-params">nextProps, nextState</span>) =&gt;</span> {
<span class="hljs-keyword">return</span> !(<span class="hljs-keyword">this</span>.props === nextProps || is(<span class="hljs-keyword">this</span>.props, nextProps)) ||
       !(<span class="hljs-keyword">this</span>.state === nextState || is(<span class="hljs-keyword">this</span>.state, nextState));
}
</code></pre>
&#x6539;&#x8FDB;setState<pre><code class="lang-js"><span class="hljs-keyword">this</span>.setState({ <span class="hljs-attr">data</span>: <span class="hljs-keyword">this</span>.state.data.update(<span class="hljs-string">&apos;counter&apos;</span>, counter =&gt; counter + <span class="hljs-number">1</span>) });
</code></pre>
</li>
</ul>
<h2 id="t96. Reconciliation">6. Reconciliation <a href="#t96. Reconciliation"> # </a></h2>
<p><a href="http://www.css88.com/react/docs/reconciliation.html">reconciliation</a></p>
<p>&#x5F53;&#x6BD4;&#x8F83;&#x4E0D;&#x540C;&#x7684;&#x4E24;&#x4E2A;&#x6811;&#xFF0C;React &#x9996;&#x5148;&#x6BD4;&#x8F83;&#x4E24;&#x4E2A;&#x6839;&#x5143;&#x7D20;&#x3002;&#x6839;&#x636E;&#x6839;&#x8DDF;&#x7684;&#x7C7B;&#x578B;&#x4E0D;&#x540C;&#xFF0C;&#x5B83;&#x6709;&#x4E0D;&#x540C;&#x7684;&#x884C;&#x4E3A;</p>
<ul>
<li>&#x5F53;&#x6839;&#x5143;&#x7D20;&#x7C7B;&#x578B;&#x4E0D;&#x540C;&#x65F6;&#xFF0C;React &#x5C06;&#x4F1A;&#x9500;&#x6BC1;&#x539F;&#x5148;&#x7684;&#x6811;&#x5E76;&#x91CD;&#x5199;&#x6784;&#x5EFA;&#x65B0;&#x7684;&#x6811;</li>
<li>&#x5F53;&#x6BD4;&#x8F83;&#x4E24;&#x4E2A;&#x76F8;&#x540C;&#x7C7B;&#x578B;&#x7684; React DOM &#x5143;&#x7D20;&#x65F6;&#xFF0C;React &#x68C0;&#x67E5;&#x5B83;&#x4EEC;&#x7684;&#x5C5E;&#x6027;&#xFF08;attributes&#xFF09;&#xFF0C;&#x4FDD;&#x7559;&#x76F8;&#x540C;&#x7684;&#x5E95;&#x5C42; DOM &#x8282;&#x70B9;&#xFF0C;&#x53EA;&#x66F4;&#x65B0;&#x53D1;&#x751F;&#x6539;&#x53D8;&#x7684;&#x5C5E;&#x6027;&#xFF08;attributes&#xFF09;</li>
<li>&#x5F53;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x66F4;&#x65B0;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x4FDD;&#x6301;&#x4E0D;&#x53D8;&#xFF0C;&#x4EE5;&#x4FBF;&#x5728;&#x6E32;&#x67D3;&#x4E2D;&#x4FDD;&#x6301;state&#x3002;React&#x4F1A;&#x66F4;&#x65B0;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x7684;&#x5C5E;&#x6027;&#x6765;&#x5339;&#x914D;&#x65B0;&#x7684;&#x5143;&#x7D20;&#xFF0C;&#x5E76;&#x5728;&#x5143;&#x7D20;&#x5B9E;&#x4F8B;&#x4E0A;&#x8C03;&#x7528; componentWillReceiveProps() &#x548C; componentWillUpdate()</li>
<li>Keys</li>
</ul>
<h2 id="t107. &#x4E0A;&#x4E0B;&#x6587;(Context)">7. &#x4E0A;&#x4E0B;&#x6587;(Context) <a href="#t107. &#x4E0A;&#x4E0B;&#x6587;(Context)"> # </a></h2>
<p>&#x5728;&#x67D0;&#x4E9B;&#x573A;&#x666F;&#x4E0B;&#xFF0C;&#x4F60;&#x60F3;&#x5728;&#x6574;&#x4E2A;&#x7EC4;&#x4EF6;&#x6811;&#x4E2D;&#x4F20;&#x9012;&#x6570;&#x636E;&#xFF0C;&#x4F46;&#x5374;&#x4E0D;&#x60F3;&#x624B;&#x52A8;&#x5730;&#x5728;&#x6BCF;&#x4E00;&#x5C42;&#x4F20;&#x9012;&#x5C5E;&#x6027;&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x5728; React &#x4E2D;&#x4F7F;&#x7528;&#x5F3A;&#x5927;&#x7684;&#x201D;context&#x201D; API&#x89E3;&#x51B3;&#x4E0A;&#x8FF0;&#x95EE;&#x9898;</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;
<span class="hljs-keyword">import</span> PropTypes <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;prop-types&apos;</span>;
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Header</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Title</span>/&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        )
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Title</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    <span class="hljs-keyword">static</span> contextTypes={
        <span class="hljs-attr">color</span>:PropTypes.string
    }
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{color:this.context.color}}</span>&gt;</span>
                Title
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        )
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Main</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Content</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">Content</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        )
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Content</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    <span class="hljs-keyword">static</span> contextTypes={
        <span class="hljs-attr">color</span>: PropTypes.string,
        <span class="hljs-attr">changeColor</span>:PropTypes.func
    }
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{color:this.context.color}}</span>&gt;</span>
                Content
                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.context.changeColor(&apos;green&apos;)}&gt;&#x7EFF;&#x8272;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.context.changeColor(&apos;orange&apos;)}&gt;&#x6A59;&#x8272;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        )
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Page</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">super</span>();
        <span class="hljs-keyword">this</span>.state={<span class="hljs-attr">color</span>:<span class="hljs-string">&apos;red&apos;</span>};
    }
    <span class="hljs-keyword">static</span> childContextTypes={
        <span class="hljs-attr">color</span>: PropTypes.string,
        <span class="hljs-attr">changeColor</span>:PropTypes.func
    }
    getChildContext() {
        <span class="hljs-keyword">return</span> {
            <span class="hljs-attr">color</span>: <span class="hljs-keyword">this</span>.state.color,
            <span class="hljs-attr">changeColor</span>:<span class="hljs-function">(<span class="hljs-params">color</span>)=&gt;</span>{
                <span class="hljs-keyword">this</span>.setState({color})
            }
        }
    }
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Header</span>/&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Main</span>/&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        )
    }
}
ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Page</span>/&gt;</span></span>,<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&apos;#root&apos;</span>));
</code></pre>
<h2 id="t118. &#x7247;&#x6BB5;(fragments)">8. &#x7247;&#x6BB5;(fragments) <a href="#t118. &#x7247;&#x6BB5;(fragments)"> # </a></h2>
<p>React &#x4E2D;&#x4E00;&#x4E2A;&#x5E38;&#x89C1;&#x6A21;&#x5F0F;&#x662F;&#x4E3A;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x8FD4;&#x56DE;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x3002; &#x7247;&#x6BB5;(fragments) &#x53EF;&#x4EE5;&#x8BA9;&#x4F60;&#x5C06;&#x5B50;&#x5143;&#x7D20;&#x5217;&#x8868;&#x6DFB;&#x52A0;&#x5230;&#x4E00;&#x4E2A;&#x5206;&#x7EC4;&#x4E2D;&#xFF0C;&#x5E76;&#x4E14;&#x4E0D;&#x4F1A;&#x5728;DOM&#x4E2D;&#x589E;&#x52A0;&#x989D;&#x5916;&#x8282;&#x70B9;&#x3002;</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">List</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{
    render() {
        <span class="hljs-keyword">return</span> (
            &lt;React.Fragment&gt;
            {
                this.props.todos.map(item =&gt; (&lt;li&gt;{item}&lt;/li&gt;))
            }
           &lt;/React.Fragment&gt;
        )
    }
}
class Todos extends React.Component{
    constructor() {
        super();
        this.state={todos:[&apos;a&apos;,&apos;b&apos;,&apos;c&apos;]};
    }
    render() {
        return (
            &lt;ul&gt;
                &lt;List todos={this.state.todos}/&gt;
            &lt;/ul&gt;
        )
    }
}

ReactDOM.render(&lt;Todos/&gt;,document.querySelector(&apos;#root&apos;));
</code></pre>
<h2 id="t129. &#x63D2;&#x69FD;(Portals)">9. &#x63D2;&#x69FD;(Portals) <a href="#t129. &#x63D2;&#x69FD;(Portals)"> # </a></h2>
<p>Portals &#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x79CD;&#x5F88;&#x597D;&#x7684;&#x65B9;&#x6CD5;&#xFF0C;&#x5C06;&#x5B50;&#x8282;&#x70B9;&#x6E32;&#x67D3;&#x5230;&#x7236;&#x7EC4;&#x4EF6; DOM &#x5C42;&#x6B21;&#x7ED3;&#x6784;&#x4E4B;&#x5916;&#x7684; DOM &#x8282;&#x70B9;&#x3002;</p>
<pre><code class="lang-js">ReactDOM.createPortal(child, container)
</code></pre>
<ul>
<li>&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#xFF08;child&#xFF09;&#x662F;&#x4EFB;&#x4F55;&#x53EF;&#x6E32;&#x67D3;&#x7684; React &#x5B50;&#x5143;&#x7D20;&#xFF0C;&#x4F8B;&#x5982;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#xFF0C;&#x5B57;&#x7B26;&#x4E32;&#x6216; &#x7247;&#x6BB5;(fragment)</li>
<li>&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#xFF08;container&#xFF09;&#x5219;&#x662F;&#x4E00;&#x4E2A; DOM &#x5143;&#x7D20;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./modal.css&apos;</span>;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Modal</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">super</span>();
        <span class="hljs-keyword">this</span>.modal=<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&apos;#modal-root&apos;</span>);
    }
    render() {
        <span class="hljs-keyword">return</span> ReactDOM.createPortal(<span class="hljs-keyword">this</span>.props.children,<span class="hljs-keyword">this</span>.modal);
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Page</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">super</span>();
        <span class="hljs-keyword">this</span>.state={<span class="hljs-attr">show</span>:<span class="hljs-literal">false</span>};
    }
    handleClick=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.setState({<span class="hljs-attr">show</span>:!<span class="hljs-keyword">this</span>.state.show});
    }
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.handleClick}</span>&gt;</span>&#x663E;&#x793A;&#x6A21;&#x6001;&#x7A97;&#x53E3;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
                {
                    this.state.show&amp;&amp;<span class="hljs-tag">&lt;<span class="hljs-name">Modal</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;modal&quot;</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;modal&quot;</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;modal-content&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;modal-content&quot;</span>&gt;</span>
                                &#x5185;&#x5BB9;
                                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.handleClick}</span>&gt;</span>&#x5173;&#x95ED;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">Modal</span>&gt;</span>
                }
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        )
    }
}
ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Page</span>/&gt;</span></span>,<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&apos;#root&apos;</span>));
</code></pre>
<pre><code class="lang-css"><span class="hljs-selector-class">.modal</span>{
    <span class="hljs-attribute">position</span>: fixed;
    <span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">top</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">right</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">bottom</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgba</span>(0,0,0,.5);
    <span class="hljs-attribute">display</span>: block;
}

@<span class="hljs-keyword">keyframes</span> zoom{
    <span class="hljs-selector-tag">from</span>{<span class="hljs-attribute">transform</span>:<span class="hljs-built_in">scale</span>(0);}
    <span class="hljs-selector-tag">to</span>{<span class="hljs-attribute">transform</span>:<span class="hljs-built_in">scale</span>(1);}
}

<span class="hljs-selector-class">.modal</span> <span class="hljs-selector-class">.modal-content</span>{
    <span class="hljs-attribute">width</span>:<span class="hljs-number">50%</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">50%</span>;
    <span class="hljs-attribute">background</span>: white;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
    <span class="hljs-attribute">margin</span>:<span class="hljs-number">100px</span> auto;
    <span class="hljs-attribute">display</span>:flex;
    <span class="hljs-attribute">flex-direction</span>: row;
    <span class="hljs-attribute">justify-content</span>: center;
    <span class="hljs-attribute">align-items</span>: center;
    <span class="hljs-attribute">animation</span>: zoom .<span class="hljs-number">6s</span>;
}
</code></pre>
<h2 id="t1310. &#x9519;&#x8BEF;&#x8FB9;&#x754C;(Error Boundaries)">10. &#x9519;&#x8BEF;&#x8FB9;&#x754C;(Error Boundaries) <a href="#t1310. &#x9519;&#x8BEF;&#x8FB9;&#x754C;(Error Boundaries)"> # </a></h2>
<p>&#x90E8;&#x5206; UI &#x4E2D;&#x7684; JavaScript &#x9519;&#x8BEF;&#x4E0D;&#x5E94;&#x8BE5;&#x7834;&#x574F;&#x6574;&#x4E2A;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x3002;
&#x4E3A;&#x4E86;&#x89E3;&#x51B3; React &#x7528;&#x6237;&#x7684;&#x8FD9;&#x4E2A;&#x95EE;&#x9898;&#xFF0C;React 16&#x5F15;&#x5165;&#x4E86;&#x4E00;&#x4E2A; &#x201C;&#x9519;&#x8BEF;&#x8FB9;&#x754C;(Error Boundaries)&#x201D; &#x7684;&#x65B0;&#x6982;&#x5FF5;&#x3002;</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ErrorBoundary</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{
    <span class="hljs-keyword">constructor</span>(props) {
        <span class="hljs-keyword">super</span>(props);
        <span class="hljs-keyword">this</span>.state={<span class="hljs-attr">hasError</span>:<span class="hljs-literal">false</span>};
    }
    componentDidCatch(err,info) {
        <span class="hljs-keyword">this</span>.setState({<span class="hljs-attr">hasError</span>: <span class="hljs-literal">true</span>});
    }
    render() {
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.state.hasError) {
            <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Something Went Wrong<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>
        }
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.props.children;
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Page</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ErrorBoundary</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Clock</span>/&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">ErrorBoundary</span>&gt;</span></span>
        )
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Clock</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>hello{null.toString()}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        )
    }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Page</span>/&gt;</span></span>,<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&apos;#root&apos;</span>));
</code></pre>
<h2 id="t1411. &#x9AD8;&#x9636;&#x7EC4;&#x4EF6;(Higher-Order Components)">11. &#x9AD8;&#x9636;&#x7EC4;&#x4EF6;(Higher-Order Components) <a href="#t1411. &#x9AD8;&#x9636;&#x7EC4;&#x4EF6;(Higher-Order Components)"> # </a></h2>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> NewComponent = higherOrderComponent(OldComponent)
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> (WrappedComponent,name) =&gt; {
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HighOrderComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
        <span class="hljs-keyword">constructor</span>() {
            <span class="hljs-keyword">super</span>();
            <span class="hljs-keyword">this</span>.state={<span class="hljs-attr">data</span>:<span class="hljs-literal">null</span>};
        }

        componentWillMount() {
            <span class="hljs-keyword">let</span> data=localStorage.getItem(name);
            <span class="hljs-keyword">this</span>.setState({data});
        }

        render() {
            <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">WrappedComponent</span> <span class="hljs-attr">data</span>=<span class="hljs-string">{this.state.data}/</span>&gt;</span>
        }
    }
    return HighOrderComponent;
}
</span></code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;
<span class="hljs-keyword">import</span> wrapLocalData <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./wrapLocalData&apos;</span>;
<span class="hljs-keyword">let</span> UserName=<span class="hljs-function">(<span class="hljs-params">props</span>) =&gt;</span> {
    <span class="hljs-keyword">return</span> &lt;input type=&quot;text&quot; defaultValue={props.data}/&gt;
}
let Password=(props) =&gt; {
    return &lt;input type=&quot;text&quot; defaultValue={props.data}/&gt;
}
let NewUserName=wrapLocalData(UserName,&apos;username&apos;);
let NewPassword=wrapLocalData(Password,&apos;password&apos;);
class Form extends Component{
    render() {
        return (
            &lt;form&gt;
                &lt;NewUserName /&gt;
                &lt;NewPassword/&gt;
            &lt;/form&gt;
        )
    }
}
ReactDOM.render(&lt;Form/&gt;,document.querySelector(&apos;#root&apos;));
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> (WrappedComponent,name) =&gt; {
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HighOrderComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
        <span class="hljs-keyword">constructor</span>() {
            <span class="hljs-keyword">super</span>();
            <span class="hljs-keyword">this</span>.state={<span class="hljs-attr">data</span>:<span class="hljs-literal">null</span>};
        }

        componentWillMount() {
            fetch(<span class="hljs-string">&apos;/data.json&apos;</span>,{
                <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;GET&apos;</span>
            }).then(<span class="hljs-function"><span class="hljs-params">response</span> =&gt;</span> response.json()).then(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
                <span class="hljs-built_in">console</span>.log(data[name]);
                <span class="hljs-keyword">this</span>.setState({<span class="hljs-attr">data</span>:data[name]});
            })

        }

        render() {
            <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">WrappedComponent</span> <span class="hljs-attr">data</span>=<span class="hljs-string">{this.state.data}/</span>&gt;</span>
        }
    }
    return HighOrderComponent;
}

</span></code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;
<span class="hljs-keyword">import</span> wrapLocalData <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./wrapLocalData&apos;</span>;
<span class="hljs-keyword">import</span> wrapAjax <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./wrapAjax&apos;</span>;
<span class="hljs-keyword">let</span> UserName=<span class="hljs-function">(<span class="hljs-params">props</span>) =&gt;</span> {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;UserName &apos;</span>,props);
    <span class="hljs-keyword">return</span> &lt;input type=&quot;text&quot; value={props.data} /&gt;
}
let Password=(props) =&gt; {
    return &lt;input type=&quot;text&quot; value={props.data}/&gt;
}
let NewUserName=wrapAjax(UserName,&apos;username&apos;);
let NewPassword=wrapAjax(Password,&apos;password&apos;);
class Form extends Component{
    render() {
        return (
            &lt;form&gt;
                &lt;NewUserName /&gt;
                &lt;NewPassword/&gt;
            &lt;/form&gt;
        )
    }
}
ReactDOM.render(&lt;Form/&gt;,document.querySelector(&apos;#root&apos;));
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;
<span class="hljs-keyword">import</span> wrapLocalData <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./wrapLocalData&apos;</span>;
<span class="hljs-keyword">import</span> wrapAjax <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./wrapAjax&apos;</span>;
<span class="hljs-keyword">let</span> UserName=<span class="hljs-function">(<span class="hljs-params">props</span>) =&gt;</span> {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;UserName &apos;</span>,props);
    <span class="hljs-keyword">return</span> &lt;input type=&quot;text&quot; value={props.data} /&gt;
}
let Password=(props) =&gt; {
    return &lt;input type=&quot;text&quot; value={props.data}/&gt;
}
UserName=wrapAjax(UserName);
UserName=wrapLocalData(UserName,&apos;username&apos;);
class Form extends Component{
    render() {
        return (
            &lt;form&gt;
                &lt;UserName /&gt;
            &lt;/form&gt;
        )
    }
}
ReactDOM.render(&lt;Form/&gt;,document.querySelector(&apos;#root&apos;));
</code></pre>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>
    
</div>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
  $('.warpper .page-toc ul ul li a').removeClass('my-active')
  $(this).addClass('my-active')
})
  // if (!$('.understand-me').length) {
  //   var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
  //   var count = bar / 26 / 2;
  //   var barHeight = $('.page-toc').outerHeight();
  //   $('.page-toc li').eq(0).children('a').addClass('red');
  //   var arr = [];
  //   $("h1,h2,h3,h4,h5,h6").each(function () {
  //     arr.push($(this).position().top);
  //   });
  //   var timer
  //   function dark() {
  //     clearTimeout(timer)
  //      timer = setTimeout(function () {
  //      var top = Math.abs($('.page-toc > ul').position().top);
  //      var cur = $('.content').scrollTop();
  //      for (var i = arr.length; i >= 0; i--) {
  //        if (arr[i] <= cur) {
  //          break;
  //        }
  //      }
  //      if (i === -1) {
  //        i = 0;
  //      }
  //      $('.page-toc li a').removeClass('red');
  //      $('.page-toc li').eq(i).children('a').addClass('red');
  //      let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
  //      $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
  //    },200)
  //   }

  //   $('.content').on('scroll', dark);
  // }
</script>
<style>

    /* ::-webkit-scrollbar{width:14px;}
    ::-webkit-scrollbar-track{background-color:transparent;}
    ::-webkit-scrollbar-thumb{background-color:transparent;}
    ::-webkit-scrollbar-thumb:hover {background-color:transparent}
    ::-webkit-scrollbar-thumb:active {background-color:transparent} */

    .page-toc > ul .red {
        background: #f3f3f3;
        z-index: 1;
        border-left: 3px solid #009a61;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #000
    }





</style>
</body>
</html>
